<template>
  <div>
    <div class="flexr-start item-center">
      <h2>平台总览</h2>
      <el-button
        @click="newDialog = true"
        size="mini"
        v-if="type == '学校负责人登陆'"
        style="margin-left:20px"
      >提现</el-button>
    </div>
    <div style="margin-top:15px;border-bottom: 1px solid #e1e1e1;width:100%"></div>
    <div class="flexr-between" v-if="type == '学校负责人登陆'">
      <div class="flexc-start item-center">
        <div class="flexr-start">
          <div class="over-box">
            <div class="text-center ob">
              <span>当日活跃度</span>
              <br>
              <span>{{userCount}}</span>
            </div>
          </div>
          <div class="over-box">
            <div class="text-center ob">
              <span>当日实付额</span>
              <br>
              <span>{{amount}}</span>
            </div>
          </div>
          <div class="over-box">
            <div class="text-center ob">
              <span>负责人剩余可提现总额</span>
              <br>
              <span>{{schoolMoney}}</span>
            </div>
          </div>
          <div class="over-box">
            <div class="text-center ob">
              <span>配送员剩余可提现总额</span>
              <br>
              <span>{{senderMoney}}</span>
            </div>
          </div>
        </div>
      <div class="flexr-start">
        <div class="over-box">
          <div class="text-center ob">
            <span>配送员累积提现总额</span>
            <br>
            <span>{{senderAllTx}}</span>
          </div>
        </div>
        <div class="over-box">
          <div class="text-center ob">
            <span>用户累积充值总额</span>
            <br>
            <span>{{userCharge}}</span>
          </div>
        </div>
        <div class="over-box">
          <div class="text-center ob">
            <span>用户累积剩余总额</span>
            <br>
            <span>{{userBellAll}}</span>
          </div>
        </div>
      </div>
      <div class="flexr-start">
        <div class="over-box">
          <div class="text-center ob">
            <span>当日跑腿总单数</span>
            <br>
            <span>{{runcount}}</span>
          </div>
        </div>
      </div>
      <div class="flexr-start">
        <div class="over-box">
          <div class="text-center ob">
            <span>当日跑腿取消单数</span>
            <br>
            <span>{{runcountCancel}}</span>
          </div>
        </div>
        <div class="over-box">
          <div class="text-center ob">
            <span>当日跑腿完成单数</span>
            <br>
            <span>{{runcountSuccess}}</span>
          </div>
        </div>
      </div>
      </div>
    </div>
    <el-dialog title="验证手机号" :visible.sync="newDialog" width="30%" center>
      <Form :model="submitData" label-postion="top">
        <FormItem label="输入金额">
          <Input v-model="submitData.amount" placeholder="请输入提现金额"></Input>
        </FormItem>
        <FormItem label="输入openId">
          <Input v-model="submitData.openId" placeholder="请输入您的openId"></Input>
        </FormItem>
        <div class="text-right">
          <span v-show="show" @click="getCode" style="color:#3797ee">获取验证码</span>
          <span v-show="!show" class="count">{{count}} s</span>
        </div>
        <FormItem label="输入验证码">
          <Input v-model="submitData.codes" placeholder="请输入验证码"></Input>
        </FormItem>
      </Form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="newDialog = false">取 消</el-button>
        <el-button type="primary" @click="add()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<style>
@import url("../../assets/css/component.css");
</style>
<script>
import G2 from "@antv/g2";
var that;
export default {
  data() {
    return {
      type: sessionStorage.getItem("type"),
      show: true,
      count: "",
      timer: null,
      senderAllTx: 0,
      userBellAll: 0,
      userChargeSend:0,
      userCharge: 0,
      userCount: 0,
      runcount: 0,
      runcountCancel: 0,
      runcountSuccess: 0,
      takeoutCount: 0,
      takeoutCountCancel:0 ,
      takeoutCountSuccess: 0,
      amount: 0,
      schoolMoney: 0,
      senderMoney: 0,
      newDialog: false,
      submitData: {
        amount: "",
        openId: "",
        codes: "",
        schoolId: sessionStorage.getItem("schoolId")
      }
    };
  },
  mounted() {
    that = this;
    if(sessionStorage.getItem("type") == '学校负责人登陆'){
      this.login();
    }
  },
  methods: {
    getCode() {
      const TIME_COUNT = 60;
      this.$http
        .post(
          this.com.NODE_API + "/ops/school/getcode",
          { schoolId: sessionStorage.getItem("schoolId") },
          {
            headers: { token: sessionStorage.getItem("token") },
            emulateJSON: true
          }
        )
        .then(res => {
          if (res.data.code) {
            this.$message({
              showClose: true,
              type: "success",
              message: "获取成功"
            });
          } else {
            this.$message({
              showClose: true,
              type: "error",
              message: "获取失败"
            });
          }
        });
      if (!this.timer) {
        this.count = TIME_COUNT;
        this.show = false;
        this.timer = setInterval(() => {
          if (this.count > 0 && this.count <= TIME_COUNT) {
            this.count--;
          } else {
            this.show = true;
            clearInterval(this.timer);
            this.timer = null;
          }
        }, 1000);
      }
    },

    login() {
      this.$http
        .post(
          this.com.NODE_API + "/ops/school/login",
          {
            loginName: sessionStorage.getItem("loginName"),
            loginPass: sessionStorage.getItem("loginPass"),
            type: sessionStorage.getItem("type") == "学校负责人登陆" ? 1 : 2
          },
          { emulateJSON: true }
        )
        .then(res => {
          if (res.data.code) {
            this.schoolMoney = res.data.params.school.money;
            this.senderMoney = res.data.params.school.senderMoney;
            this.senderAllTx = res.data.params.school.senderAllTx;
            this.userBellAll = res.data.params.school.userBellAll;
            this.userCharge = res.data.params.school.userCharge;
            this.userChargeSend = res.data.params.school.userChargeSend;
            sessionStorage.setItem("token", res.data.params.token);
            this.$http
              .post(
                this.com.NODE_API + "/ops/admin/index",
                { schoolId: sessionStorage.getItem("schoolId") },
                {
                  headers: { token: res.data.params.token },
                  emulateJSON: true
                }
              )
              .then(res => {
                if (res.data.code) {
                  this.runcountCancel = res.data.params.msg.cancelRunOrderCount;
                  this.runcount = res.data.params.msg.runcount;
                  this.runcountSuccess = res.data.params.msg.runcountSuccess;
                  this.userCount = res.data.params.msg.userCount;
                } else {
                  this.$message({
                    showClose: true,
                    type: "error",
                    message: "查询失败"
                  });
                }
              });
          } else {
            this.$message({
              showClose: true,
              type: "error",
              message: "登录失败"
            });
          }
        });
    },

    add: function() {
      this.$http
        .post(this.com.NODE_API + "/ops/school/tx", this.submitData, {
          headers: { token: sessionStorage.getItem("token") },
          emulateJSON: true
        })
        .then(res => {
          if (res.data.code) {
            that.$message({
              showClose: true,
              type: "success",
              message: "提现完成"
            });
            this.newDialog = false;
          } else {
            that.$message({
              showClose: true,
              type: "error",
              message: res.data.msg
            });
            this.newDialog = true;
          }
        });
    }
  }
};
</script>
